<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        /* position: relative; */
        height: 300px;
        background-color: orange;
    }
    .box1{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        background-color: #f00;
    }
    .box3{
        display: inline-block;
        height: 100px; 
        /* width: 100px;
        */
        position: relative;
        top: 50%;
        transform: translate(0,-50%);
        /* left: 50%; */
        background-color: #f00;
    }
</style>
<body>
    <!-- 水平居中 
    
            1.行内级元素
                *设置父元素的text-align: center
            2.块级元素
                *设置当前块级元素(宽度) margin: 0 auto;
            3.绝对定位
                *元素有宽度情况下,left0/right0/margin:0 auto;
            4.flex
                *justify-content:center 
    -->
<!-- 
    垂直居中:
    1.绝对定位
        *元素有高度情况下, top0/bottom0/margin:auto 0;
    2.flex布局
     align-items:center;
    3.top / transform
        /*两件事情:1.让元素向下位移文元素的50%2.让元素向上位移自身的50% (推荐)
 -->
 <!-- 1.垂直居中绝对定位
    弊端:
    1> 必须使用定位(脱离标准流)
    2>必须给元素设置高度
-->
 <!-- 1.垂直居中flex布局
    弊端:
    1> 当前flex布局中所有的元素都会被垂直居中
-->
 <!-- <div class="container">
    <div class="box1"></div>
 </div> -->
 <div class="container">
    <div class="box3">inzv</div>
 </div>
</body>
</html>